import React,{Component} from 'react';
import {Row,Col,Carousel,Tag,Rate   } from 'antd';
import $http from 'axios';

import './Movie.less'

class Movie extends Component{
	constructor(props){
		super(props);
		this.state={
			title:'电影详情页',
			info:{
				title:null,
				images:{
					large:null,
					medium:null
				},
				genres:[],
				rating:{
					average:5
				},
				year:'',
				directors:[{
					name:null,
					alt:'',
					avatars:{
						small:'',
						medium:'',
						large:''
					}
				}],
				casts:[]
			}
		}

	}
	
	componentWillMount(){
		var id=this.props.match.params.id;
		var url="/mock/movie/index_new.json";
   		$http.get(url).then((res)=>{		
			for(let item of res.data.subjects){
				if(item['id']===id){
					// console.log(item);
					this.setState({
						info:item
					});
					break;
				}	
			}
			
			console.log(this.state.info);
		});
	}

	render(){
		
		return <div className="container" style={{marginBottom:40}}>
			<Row gutter={16}>
		      <Col span={12}>
		        <div className="gutter-box">
					 <Carousel  effect="fade">
					    <div className="slide-img">
							<img src={this.state.info.images.large} alt=""/>
					    </div>
					    <div className="slide-img">
							<img src={this.state.info.directors[0].avatars.large} alt=""/>
					    </div>
					    {this.state.info.casts.map((item,index)=>{
						return <div className="slide-img">
							<img title={'主演：'+item.name} src={item.avatars.small}  key={index}/>
						</div>
					})}

					  </Carousel>
		        </div>
		      </Col>
		      <Col span={12}>
		        <div className="gutter-box">
					<h3>{this.state.info.title}</h3>
					<div>
						{
							this.state.info.genres.map((item,index)=>{
								return <Tag key={index} color="red">{item}</Tag>
							})
						}
					</div>
					
					<div style={{margin:"10px 0"}}>
					<img title={'导演：'+this.state.info.directors[0].name} style={{width:100,borderRadius:4}} src={this.state.info.directors[0].avatars.small} alt="" />
					</div>

					<div>
					{this.state.info.casts.map((item,index)=>{
						return <img title={'主演：'+item.name} style={{width:80,marginRight:10,borderRadius:4}} src={item.avatars.small} alt="" key={index}/>
					})}
					</div>
					
					<div>
						<Rate disabled count={10}  allowHalf  value={this.state.info.rating.average} />	
					</div>
					<div><Tag color="green">{this.state.info.year}</Tag></div>

		        </div>
		      </Col>
		    </Row>
		    
		</div>
	}
}

export default Movie;